<script setup lang="ts">
import axios from "axios";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import {onMounted, ref, watch} from "vue";
import "dayjs/locale/zh-cn";
// 中文
dayjs.locale("zh-cn");
// 相对时间
dayjs.extend(relativeTime);



interface RootObject {
  data: Data;
  message: string;
}

interface Data {
  results: Result[];
  pre_timestamp: string;
}

interface Result {
  art_id: string;
  title: string;
  aut_id: string;
  comm_count: number;
  pubdate: string;
  aut_name: string;
  is_top: number;
  cover: Cover;
}

interface Cover {
  type: number;
  images?: string[];
}


const props = defineProps<{ channelId: number }>();

// 文章列表
const articleList = ref<Result[]>([])

watch(
  () => props.channelId,
  async () => {
    const res = await axios.get<RootObject>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: props.channelId,
          timestamp: Date.now(),
        },
      },
    );
    articleList.value = res.data.data.results;
  },
  { immediate: true }
);

// onMounted(async() => {
//   const data = await axios.request<RootObject>({ 
//     url:'http://geek.itheima.net/v1_0/articles',
//     method:'get',
//     params:{
//       channel_id:6,
//       timestamp:new Date().getTime(),
//       with_top:1
//     }
//    })
//     articleList.value = data.data.data.results;
//     // console.log(data);
    
//   })

</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in articleList" :key="i.art_id">
      <p class="title">{{ i.title }}</p>
      <img v-for="ImageItem in i.cover.images" :key="ImageItem"  class="img" :src="ImageItem" alt="">
      <div class="info">
        <span>{{i.aut_name}}</span>
        <span>{{ i.comm_count}}评论</span>
        <span>{{dayjs(i.pubdate).fromNow()}}</span>
      </div>
    </div>
  </div>
</template>